$(function () {
    getTodo();
    //新增数据
    $('#title').on('keydown', function (e) {
        if (e.keyCode == 13) {
            var data = getData();
            data.push({
                title: $(this).val(),
                done: false
            })
            console.log(data);

            setData(data);
            getTodo();
            $(this).val('')
        }
    })

    $('#btn').on('click', function () {
        var data = getData();
        data.push({
            title: $(this).siblings('#title').val(),
            done: false
        })
        setData(data);
        getTodo();
        $(this).siblings('#title').val('')
    })
    //删除数据
    $('ul,ol').on('click', 'a', function () {
        var index = $(this).attr('myindex');
        var data = getData();
        data.splice(index, 1);
        setData(data);
        if(data.length==0){ $('ul,ol').empty();}
        getTodo();
    })
    $('ul,ol').on('click', 'input', function () {
        var index = $(this).siblings('a').attr('myindex');
        var data = getData();
        var flag = $(this).prop('checked');
        data[index].done = flag;
        setData(data);
        getTodo();
    })
    //设置数据
    function setData(mycount) {
        localStorage.setItem('name', JSON.stringify(mycount))
    }
    //得到数据
    function getData() {
        var data = localStorage.getItem('name');
        if (data) {
            return JSON.parse(data)
        } else {
            return []
        }
    }
    //渲染数据到页面
    function getTodo() {
        var data = getData();
        $('ul,ol').empty();
        var donecount = 0, todocount = 0;
        $.each(data, function (i, val) {
            if (val.done) {
                $('ul').append(`<li>
    <input type="checkbox"  checked name="" id="">
    <p>${val.title}</p>
    <a href="#" title="删除" myindex="${i}"></a>
</li>`);
                donecount++;
            } else {
                $('ol').append(`<li>
    <input type="checkbox" name="" id="">
    <p>${val.title}</p>
    <a href="#" title="删除" myindex="${i}"></a>
</li>`);
                todocount++;
            }
            $('#todocount').html(todocount);
            $('#donecount').html(donecount);
        })
    }

})